<template>

	<view style="border:1rpx solid transparent">
		<view class="custom-navbar" style="background:#F7F8FA">
		    <view class="left" @click="handleNavbarClick('left')">
		      <slot name="left">	<image  class="arranged" src="@/static/fanhui.png" mode="aspectFit"></image></slot>
		    </view>
		    <view class="center" @click="handleNavbarClick('center')">
		      <slot name="center">{{title}} </slot>
		    </view>
		   
		</view>
		<view style="margin-top:100px;">
			
		
			<!-- {{statusBarHeight}} -->
			<view class="content" v-if="renderType === 'column'">
	
				<view class="course-grade">
					<view class="grade-text" :class="{'active-tab': index === currentIndex}"
						v-for="(item, index) in tabText" :key="index"
						@tap="handleSwitchTab(index)">{{item.gradeName}}</view>
				</view>
				<view class="course-detail">
					<view class="course-items" v-for="(item, index) in renderData" :key="index"
						@tap="handleSelectCourse(item.productId)">
	
						<image class="course-image" :src="item.cover_full"></image>
						<text class="course-name">{{item.productName}}</text>
					</view>
				</view>
			</view>
			<view v-else-if="renderType === 'work'">
				<HomeWork></HomeWork>
			</view>
	
			<view class="course-detail-column" v-else>
			<view class="course-items" v-for="(item, index) in renderData" :key="index"
				@tap="handleSelectCourse(item.productId)">

				<image class="course-image" :src="item.cover_full">
					<!-- <image class="course-image"
				src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/115b123b408449dd967bb6f2969f0fce_mergeImage.png"> -->
				</image>
				<view class="course-info">
					<text class="course-name">{{item.productName}}</text>
					<text class="course-time">{{item.expire_time}}</text>
				</view>
			</view>
		</view>
		</view>
	</view>
</template>

<script>
	import HomeWork from '@/pages/homework/index.vue';
	export default {
		components: {
			HomeWork
		},
		data(props) {
			return {
				title: '',
				tabText: [{
					gradeName: '全部',
				}],
				// tabText: ['全部', '七年级', '八年级', '九年级'	],
				database: [{
					index: 1,
					level: '七年级',
					coverImg: '',
					name: '七年级七年级',
					time: '2023.09.02 17:08',
				}, {
					index: 2,
					level: '八年级',
					coverImg: '',
					name: '八年级八年级',
					time: '2023.09.02 17:08',
				}, {
					index: 3,
					level: '九年级',
					coverImg: '',
					name: '九年级九年级',
					time: '2023.09.02 17:08',
				}, {
					index: 3,
					level: '九年级',
					coverImg: '',
					name: '九年级九年级2',
					time: '2023.09.02 17:08',
				}],
				renderData: [],
				currentIndex: 0,
				renderType: 'column', // column || raw

				grade: '',
				page: 1,
				pageSize: 10,
				statusBarHeight: 0,
				tabarTitle:"",
				isLastPage:false
			}
		},
		onLoad(option) {

			uni.getSystemInfo({
			  success: function (info) {
			    console.log('顶部高度onLoad:', info);
				this.statusBarHeight = info.statusBarHeight;
			  }
			});
			this.title =option.title
			this.statusBarHeight =option.statusBarHeight
			uni.setStorageSync('statusBarHeight', this.statusBarHeight);
			uni.setNavigationBarTitle({
				title: option.title,
			});
			this.tabarTitle = option.title;
			console.log(1)
			// const currentUrl = window.location.href; // 获取当前页面的URL
			// console.log(currentUrl, 2)
			// const domain = this.getRootDomain(currentUrl); // 获取URL中的域名
			// console.log('域名:', domain);
			// uni.setStorageSync('yu_ming', domain);


			if (option.token != undefined) {
				console.log(option.token)
				uni.setStorageSync('token', option.token);
			}


			this.nianji()

			// this.renderData = this.database;
			// this.renderType = option.type === 'video' ? 'raw' : 'column';
			this.renderType = option.type === 'video' ? 'raw' : option.type === 'work' ? 'work' : 'column';
		},
		onShow() {
			// this.statusBarHeight = uni.getStorageSync('statusBarHeight'); ///从本地缓存中同步移除指定key的数据
			// let currentPage = getCurrentPages()[getCurrentPages().length-1].route
			// console.log(currentPage)
			//  var isng =  uni.getSystemInfoSync()
			//                 // if(isng.platform==='ios'){
			//                 //     return 44+isng.statusBarHeight
			//                 // }else if(isng.platform==='android'){
			//                 //     return 48+isng.statusBarHeight
			//                 // }else{
			//                 //     return 0;
			//                 // }
			// 				this.statusBarHeight = isng.statusBarHeight;
			// 				console.log(this.statusBarHeight,'onShow')
			// this.$forceUpdate();
			// uni.getSystemInfo({
			//   success: function (info) {
			//     console.log('顶部高度onShow:', info.statusBarHeight);
			// 	this.statusBarHeight = info.statusBarHeight;
			//   }
			// });

			// const info = uni.getSystemInfo();

			// this.statusBarHeight = info.statusBarHeight;
			// console.log('状态栏高度：' + this.statusBarHeight + 'px');
			// uni.removeStorageSync('xuanzhede_bj');
			// uni.removeStorageSync('xuanzhede_ti');
			// uni.removeStorageSync('xuanzhede');
			// uni.removeStorageSync('grade');
			
		},
		onUnload() {
			// 处理页面卸载的逻辑
			console.log(999)
			// uni.removeStorageSync('statusBarHeight');

			this.openExternalURL()
			// console.log('页面已经卸载');
		},
		onHide() {
			// uni.removeStorageSync('xuanzhede_bj');
			// uni.removeStorageSync('grade');
			// 处理页面隐藏的逻辑
			console.log(11)
			console.log('页面已经隐藏');
			// this.openExternalURL()


		},

		mounted() {
			// uni.getSystemInfo({
			// 			    success:(e)=> {	
			// 			    this.statusBarHeight = e.statusBarHeight;
			// 			  }
			// 			})
			// 			     console.log(this.statusBarHeight,'-')

		},
		methods: {

			handleNavbarClick(position) {
				console.log(position)
				if (position == 'left') {


					this.openExternalURL()


				} else {

				}
			},
			openExternalURL() {
				window.location.href = 'learnteacher://goback';
			},
			getRootDomain(url) {

				const domain = url.split('/')[2]; // 获取URL中的域名部分
				return domain.split(':')[0]; // 去除协议和端口
			},
			nianji() {
				var that = this
				that.$post('grade_t').then(res => {
					if (res.code != 0) {

						that.tabText = that.tabText.concat(res.data.data)
						console.log(that.tabText)
						that.textbook()
					} else {

						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}


				})
			},
			textbook() {
				var that = this
				var data = {
					grade: that.grade,
					page: that.page,
					pageSize: that.pageSize,
				}
				let url = "";
				if(this.tabarTitle == '听说'){
					url = "hearsay";
				}
				if(this.tabarTitle == '听力'){
					url = "listening";
				}
				if(this.tabarTitle == '跟读'){
					url = "repeat";
				}
				if(this.tabarTitle == '笔试'){
					url = "writing";
				}
				if(this.tabarTitle == '音标'){
					url = "soundmark";
				}
				if(this.tabarTitle == '典范'){
					url = "modelsp";
				}
				if(this.tabarTitle == '新概念'){
					url = "newconcept";
				}
				if(this.tabarTitle == '黑布林'){
					url = "blackplum";
				}
				that.$post(url, data).then(res => {
					if (res.code != 0) {
						// console.log(res, 11111)
						var feilei_neirong = res.data;
						
						if (feilei_neirong.length != 0) {
							
							feilei_neirong.forEach(rect => {
								
								that.renderData.push(rect);
							});
							console.log(that.renderData = that.renderData)
							uni.hideLoading()
						} else {
							that.isLastPage = true;
							uni.showToast({
								title: '没有更多的数据了',
								icon: 'none',
								duration: 2000
							});
						}

					} else {


						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}


				})
			},
			handleSwitchTab(index) {
				this.page = 1
				this.currentIndex = index;
				this.tabText.forEach((item, indexs) => {
					if (indexs == index) {
						this.renderData = [];
						console.log(item)
						this.grade = item.grade
						this.textbook()

					}
				});
				// if (index === 0) {
				// 	console.log(111)
				// 	this.renderData = this.database;
				// 	console.log(this.renderData)
				// 	// this.textbook()
				// } else {
				// 	this.renderData = this.database.filter(val => val.index === index);
				// 	console.log(this.renderData)
				// }
			},
			handleSelectCourse(id) {
				console.log("this.tabarTitle",this.tabarTitle);
				if (this.renderType === 'raw') {
					uni.navigateTo({
						url: `/pages/detail/index`,
					});
				} else if (this.renderType === 'work') {
					uni.navigateTo({
						url: `/pages/homework/index`,
					});
				} else {
					uni.navigateTo({
						url: `/pages/catalogue/index?id=${id}&title=${this.tabarTitle}`,
					});
				}
			},
			onReachBottom() {
				var that = this
				if(!that.isLastPage){
					uni.showLoading({
						title: '加载中...',
						mask: true //遮蔽层
					})
					that.page += 1;
					that.textbook();
				}
			},
		}
	}
</script>

<style scoped>
	.arranged {
		width: 50rpx;
		height: 50rpx;

	}

	.custom-navbar {
		padding:10rpx;
		padding-top: 43px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		z-index: 1000;
		width: 97%;
		font-weight: bold;
	}

	.left,
	.right {
		display: flex;
		align-items: center;
	}

	.center {
		flex: 1;
		text-align: center;
	}




	.content {
		padding: 0 32rpx;
	}

	.course-grade {
		display: flex;
		align-self: flex-start;
		margin-bottom: 32rpx;
		margin-left: 8rpx;
		margin-top: 2rpx;
		overflow-x: scroll;
	}

	.grade-text {
		height: 44rpx;
		line-height: 44rpx;
		padding: 0 24rpx;
		margin-right: 24rpx;
		color: #A0A0A0;
		font-size: 24rpx;
		border-radius: 28rpx;
		background-color: #FFFFFF;
		width: 13%;
		flex: 0 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.active-tab {
		color: #FFFFFF;
		background-color: #2979FF;
	}

	.course-detail {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		column-gap: 25rpx;
		row-gap: 24rpx;
	}

	.course-items {
		width: 212rpx;
		font-size: 36rpx;
		color: #8f8f94;
	}

	.course-items:nth-child(3n) {
		margin-right: 0;
	}

	.course-image {
		width: 212rpx;
		height: 300rpx;
		border-radius: 5rpx;
		object-fit: contain;
		margin-bottom: 16rpx;
	}

	.course-name {
		color: #222222;
		font-size: 28rpx;
		line-height: 40rpx;
	}

	.course-detail-column {
		padding: 48rpx 32rpx 0;
		box-sizing: border-box;

		.course-items {
			width: 100%;
			display: flex;
			margin-bottom: 40rpx;
			padding-bottom: 40rpx;
			position: relative;
		}

		.course-items::after {
			content: '';
			width: 622rpx;
			height: 2rpx;
			background-color: #EEEEEE;
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
		}

		.course-items:last-child::after {
			display: none;
		}

		.course-image {
			width: 300rpx;
			height: 180rpx;
			margin-right: 40rpx;
		}

		.course-info {
			display: flex;
			flex-direction: column;
			margin-top: 40rpx;
		}

		.course-name {
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #222222;
			line-height: 44rpx;
			text-align: left;
			font-style: normal;
			margin-bottom: 28rpx;
		}

		.course-time {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #222222;
			line-height: 40rpx;
			text-align: left;
			font-style: normal;
		}
	}
</style>
